import logo from '@/assets/imgs/logo.png';
import { LoginFormPage, ProFormCheckbox } from '@ant-design/pro-components';
import { request } from '@umijs/max';
import { Tabs } from 'antd';
import { useState } from 'react';
import AccountLogin from './AccountLogin';
import Actions from './Actions';
import PhoneLogin from './PhoneLogin';

type LoginType = 'phone' | 'account';

type formDataType = {
  username?: string;
  password?: string;
  mobile?: string;
  captcha?: string;
};

export default function FormPage() {
  const items = [
    { label: '账户密码登录', key: 'account' },
    { label: '手机号登录', key: 'phone' },
  ];
  const [loginType, setLoginType] = useState<LoginType>('account');

  const login = async (data: formDataType) => {
    try {
      const response = await request(
        'http://8.134.116.118:8890/food/shop/spUser/login',
        {
          method: 'POST',
          params: {
            username: data.username,
            password: data.password,
          },
        },
      );
      console.log(response);
    } catch (err) {
      console.log('失败', err);
    }
  };

  // const loginTest = async (formData: formDataType) => {
  //   const res = await request('/api/login', {
  //     method: 'POST',
  //     params: formData,
  //   });
  //   if (res.success) {
  //     message.success(res.data.message);
  //   }
  //   // console.log(res);
  // };

  const onSubmit = async (formData: formDataType) => {
    console.log(formData);
    login(formData);
    // history.push('/');
  };
  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh',
      }}
    >
      <LoginFormPage
        onFinish={onSubmit}
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        logo={logo}
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="预制菜溯源平台"
        containerStyle={{
          backgroundColor: 'rgba(0, 0, 0,0.65)',
          backdropFilter: 'blur(4px)',
        }}
        actions={<Actions />}
      >
        <Tabs
          centered
          items={items}
          activeKey={loginType}
          onChange={(activeKey) => setLoginType(activeKey as LoginType)}
        />
        {loginType === 'account' && <AccountLogin />}
        {loginType === 'phone' && <PhoneLogin />}
        <div
          style={{
            marginBlockEnd: 24,
          }}
        >
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a
            style={{
              float: 'right',
            }}
          >
            忘记密码
          </a>
        </div>
      </LoginFormPage>
    </div>
  );
}
